<template>
	<view class="meal">
		<u-navbar :autoBack="true" leftIconColor="#fff" title="个人套餐信息" :bgColor="theme == 'light' ? '#0071ff' : '#2c2c2c'"
			:safeAreaInsetTop="true" :placeholder="true" titleStyle="color:#fff">
		</u-navbar>
		
		<view v-for="(item,index) in mealList" :key="index" class="bg-white">
			
			<view class="flex bg-white margin-xs justify-between align-center padding-xs" style="flex: 1;">
				<view style="flex:1;">
					<image class="radius" style="width: 156upx;height: 156upx;" :src="baseImg + (item.qiPkgData ? item.qiPkgData.pkgImg : '')"></image>
				</view>
				<view class="flex flex-direction padding-left-xs" style="flex:5;">
					<view class="text-bold text-df"> {{item.qiPkgData ? item.qiPkgData.pkgName : 'no'}}</view>
					<view class="text-xs text-gray" style="line-height: 1.6;">
						<text class="line3">
							<mp-html :content="item.qiPkgData ? item.qiPkgData.pkgMinDesc :''"></mp-html>
						</text>
					</view>
					<view class="flex justify-between text-sm">
						<text class="text-gray">时间：{{item.createTime}}</text>
						<text class="text-red text-bold">￥{{item.qiPkgData ? item.qiPkgData.pkgPrice : ''}}</text>
					</view>
				</view>
			</view>
			<view class="bg-white radius">
				<view class="cu-bar bg-white solid-bottom">
					<view class="action">
						<text class="text-bold">包含权益</text>
					</view>
				</view>
				<view class="cu-list menu">
					<block v-for="items,index in item.qiUserPkgLegas" :key="index">
						<view class="cu-item">
							<view class="content">
								<text class="text-grey">{{items.pkgLegalName}}</text>
							</view>
							<view class="action flex align-center text-gray">
								<view>
									总{{items.totalFrequency}}{{pkgUnitType[items.pkgUnitType]}} 
									<!-- 已使用{{items.pkgLegUse}}{{pkgUnitType[items.pkgUnitType]}}, -->
								</view>
								<view class="margin-xs">
									剩余{{items.pkgUnitVal}}{{pkgUnitType[items.pkgUnitType]}}
								</view>
								<text class="cuIcon-right"></text>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
		

	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		data() {
			return {
				mealList: [

				],
				pkgUnitType:{
					0:'次',
					1:'周',
					2:'字'
				}
			}
		},
		computed: {
			...mapState(['theme', ])

		},
		onLoad() {
			this.orderList()
		},
		methods: {
			
			//查询个人套餐信息列表及权益
			async orderList() {
				const {
					data
				} = await uni.$u.http.get(`/aiv/pkgData/getUserPkgDataLega?uid=${uni.getStorageSync('userInfo').id}`)
				console.log(data.data);
				this.mealList = data.data
			},
			
			cliTaoC(e){
				console.log(e);
				// uni.navigateTo({
				// 	url: `/pages/user/userMealList?list=${JSON.stringify(e.qiUserPkgLegas)}`,
				// });
			},
		}

	};
</script>

<style lang="scss" scoped>
	.meal{
		padding:0rpx 10rpx 20rpx 10rpx;
	}
</style>